<template>
  <el-dialog
    :title="dialogTitle"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="beautyService-container" style="padding: 10px;">
      <el-form
        ref="beautyService"
        :model="beautyService"
        class="form-container"
        :rules="AddRules"
        label-width="110px"
      >
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="beautyService.name" :disabled="id?true:false" />
        </el-form-item>
        <el-form-item label="服务图片" prop="imageUrl">
          <el-upload
            class="avatar-uploader"
            action="/api/imgUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="beautyService.imageUrl" :src="beautyService.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="服务介绍" prop="introduction">
          <el-input v-model="beautyService.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="服务价格" prop="price">
          <el-input v-model="beautyService.price" />
        </el-form-item>
        <el-form-item label="材料消耗" prop="materialName">
          <!-- <el-select v-model="beautyService.materialName" clearable placeholder="请选择材料消耗" :disabled="id?true:false">
            <el-option label="无" value="" />
            <el-option label="汽车膜" value="汽车膜" />
            <el-option label="座椅" value="座椅" />
            <el-option label="车漆" value="车漆" />
            <el-option label="轮胎" value="轮胎" />
          </el-select> -->
          <el-select
            v-model="beautyService.materialName"
            placeholder="请选择材料"
            :loading="selectLoading"
            value-key="id"
            @visible-change="getSelectList"
          >
            <el-option
              v-for="item in selectList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否消耗数量" prop="isConsumeNum">
          <el-radio-group v-model="beautyService.isConsumeNum">
            <el-radio label="是" />
            <el-radio label="否" />
          </el-radio-group>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('beautyService')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('beautyService')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { getServiceInfo, modifyService, addService, getMaterialList } from '@/api/beautyService'
import { Message } from 'element-ui'
export default {
  name: 'AddDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      beautyService: {
        name: '',
        imageUrl: '',
        introduction: '',
        price: '',
        materialName: '',
        isConsumeNum: ''
      },
      selectList: [],
      AddRules: { // 对话框表单验证
        name: [{ required: true, message: '服务名称不能为空', trigger: 'blur' }],
        imageUrl: [{ required: true, message: '请上传服务图片', trigger: 'blur' }],
        introduction: [{ required: true, message: '服务介绍不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '服务价格不能为空', trigger: 'blur' }],
        isConsumeNum: [{ required: true, message: '请选择是否消耗数量', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getServiceInfo(this.id).then(res => {
          if (res) {
            this.beautyService.name = res.data.data.name
            this.beautyService.imageUrl = res.data.data.imageUrl
            this.beautyService.introduction = res.data.data.introduction
            this.beautyService.price = res.data.data.price
            this.beautyService.materialName = res.data.data.materialName
            this.beautyService.isConsumeNum = res.data.data.isConsumeNum
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyService(this.id, this.beautyService).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            if (this.beautyService.imageUrl) {
              addService(this.beautyService).then(res => {
                if (res) {
                  Message({
                    message: res.data.message,
                    type: 'success',
                    duration: 5 * 1000
                  })
                  this.$refs[formName].resetFields()
                  this.$emit('closeDialog')
                }
              })
              this.$emit('getTable')
            } else {
              Message({
                message: '图片上传失败！',
                type: 'error',
                duration: 5 * 1000
              })
            }
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.beautyService.resetFields()
      this.beautyService.id = ''
    },
    handleAvatarSuccess(res, file) {
      this.beautyService.imageUrl = file.response.data.path
    },
    getSelectList() {
      getMaterialList().then(res => {
        this.selectList = res.data.list
      })
    }
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isLt2M = file.size / 1024 / 1024 < 2

    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!')
    //   }
    //   return isJPG && isLt2M
    // }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 570px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 510px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
